<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .bigcon {
            width: 256px;
            transition: all 0.4s;
        }

        .imgcon {
            display: inline-block;
            background: red;
            /* border: 1px solid red; */
            position: relative;
            width: 100%;
            height: 80px;
            transition: all 0.4s;
        }

        @media screen and (min-width:1024px) {
            .bigcon {
                width: 316px;
                transition: all 0.4s;
            }

            .imgcon {
                height: 92.5px;
                transition: all 0.4s;
            }
        }

        .target-image {
            width: 100%;
        }

        img {
            vertical-align: middle;
        }

        i {
            display: inline-block;
            width: 18px;
            height: 18px;
            /* background: red; */
            position: absolute;
            /* left: 0;
            top: 0; */
            border-radius: 50%;
            background: url("./images/hoverclick.png") no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="bigcon">
        <span class="imgcon">
            <img class="target-image" id="target-image"
                src=""
                alt="描述文字">

        </span>

        <!-- 展示鼠标点击位置信息 -->

        <!-- <div>
            点击图片后，这里会显示点击位置的坐标
        </div> -->
        <div>
            <button id="btn">确定</button>
        </div>
    </div>


    <hr>
    <button id="login">登录</button>

    <!-- JavaScript 文件链接 -->
    <!-- <script>
        document.getElementById('target-image').addEventListener('click', function (event) {
            // 获取图片元素
            const img = event.target;

            // 计算点击位置相对于图片的坐标
            const rect = img.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            // 计算相对于图片宽高的百分比位置
            const percentX = (x / rect.width) * 100;
            const percentY = (y / rect.height) * 100;

            // 显示结果
            const infoDiv = document.getElementById('click-info');
            infoDiv.innerHTML = `
                <p>绝对坐标: X=${x.toFixed(1)}px, Y=${y.toFixed(1)}px</p>
                <p>相对百分比: X=${percentX.toFixed(1)}%, Y=${percentY.toFixed(1)}%</p>
                <p>图片尺寸: ${rect.width}px × ${rect.height}px</p>
            `;

            // 可以在控制台查看更详细的信息
            console.log('图片点击事件:', {
                element: img,
                clientX: event.clientX,
                clientY: event.clientY,
                offsetX: x,
                offsetY: y,
                percentX: percentX,
                percentY: percentY,
                imageWidth: rect.width,
                imageHeight: rect.height
            });
        });
    </script> -->

    <script src="jquery.js"></script>
    <script>
        $(function () {
            const baseUrl = "http://192.168.1.110:8989"
            $("#login").click(function () {//登录验证
                $.ajax({
                    url: baseUrl + "/api/account/login",
                    type: "post",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify({
                        "username": "sy_admin",
                        "password": "E21vWmAfx8Qz"
                    }),
                    success: function (res) {
                        console.log(res);
                        localStorage.setItem("token", res.data.token)

                    },
                    error: function () {

                    }
                })

            })
            // 下面是写好的

            let arry = []

            //             antiVerifyCheck: 200,52;249,51;280,33
            // imgw: 331
            $("img").click(function (event) {
                if (arry.length == 3) {
                    return false

                }
                const obj = event.target;
                var offsetX = event.pageX - (obj.getBoundingClientRect().left + document.body.scrollLeft)
                var offsetY = event.pageY - (obj.getBoundingClientRect().top + document.body.scrollTop)
                var offx = parseInt(offsetX);
                var offy = parseInt(offsetY);
                arry.push(`${offx},${offy}`);
                console.log(arry);

                // 计算点击位置相对于图片的坐标
                // const rect = img.getBoundingClientRect();
                // const x = event.clientX - rect.left;
                // console.log(event.clientY);


                // const y = event.clientY - rect.top
                // console.log(x, y);


                // arry.push(`${Math.floor(x)},${Math.floor(y)}`)
                // console.log(arry);

                $(".imgcon").append(`<i data-xy="${offx},${offy}" style="left:${offsetX - 8}px;top:${offsetY - 8}px"></i>`)

                const prarams = {
                    action_id: "c_jyclick",

                    action_type: "events",
                    breaker_id: "body>div:eq(8)>div:eq(1)>div>div:eq(1)>div:eq(1)>img:eq(0)",

                    breaker_name: "",
                    product_name: "信息搜索",

                    page_id: "",
                    page_name: "招标采购搜索",

                    desc: "招标采购公告、超前项目搜索",
                    platform: "PC",

                    url: "https://www.jianyu360.cn/jylab/supsearch/index.html?id=pcbaiduSEM&bd_vid=10331150555318229915",

                    title: "剑鱼标讯",

                    date: new Date(),

                    source: "",
                    chain_name: "data_analysis",
                }
                $.ajax({
                    url: baseUrl + "/api/zkjs/search/statistics",
                    type: "post",
                    contentType: "application/x-www-form-urlencoded",
                    dataType: "json",
                    data: prarams,
                    headers: {
                        Authorization: localStorage.getItem("token"),
                        //apikey:"HhYvHgAGQV9fWxEDLw8HFw=="
                    },
                    success: function (res) {
                    },
                    error: function () {
                    }
                })

            })


            $(document).on("click", ".imgcon i", function () {
                let xy = $(this).attr("data-xy");

                let Index = arry.findIndex(item => item == xy);
                // console.log(Index);
                arry.splice(Index, 1);

                $(this).remove();





            })
            $("#btn").click(function () {

                $("i").each(function () {
                    $(this).remove()
                })

                const now = Date.now(); // 当前时间戳
                const date = new Date(now);
                date.setFullYear(date.getFullYear() - 1);

                const startTime = date.getTime() / 1000;


                const endTime = Date.parse(new Date()) / 1000


                // let data = {
                //     id:"HS1P_gtcOs2jRxdqiE1Qx2FbluDjmmQjqgdx5_RJZgdvG_S387B5-GjdhE72D7BfSC-FBJ9RrLXY0ogdQzQeW04TbZjbWNFiTtcJ",
                //     antiVerifyCheck: arry.join(";"),
                //     imgW: $("#target-image").width()
                // }
                let data = {
                    "agency": "",
                    "buyer": "",
                    "buyerClass": "",
                    "buyerTel": "",
                    "province": "",
                    "city": "",
                    "district": "",
                    "exclusionWords": "",
                    "fileExists": "",
                    "industry": "",
                    "keyWords": "",
                    "pageNum": 1,
                    "pageSize": 50,
                    "price": "",
                    // "publishTime": "1588900062-1746666462",
                    "publishTime": `${Math.floor(startTime)}-${endTime}`,

                    "reqType": "lastNews",
                    "searchGroup": 0,
                    "searchMode": 0,
                    "selectType": "title,content",
                    "subtype": "",
                    "winner": "",
                    "winnerTel": "",
                    // "imgW":0,
                    // "antiVerifyCheck": "",



                    antiVerifyCheck: arry.join(";"),
                    imgW: $("#target-image").width()
                }

                $.ajax({
                    url: baseUrl + "/api/zkjs/search/list",
                    type: "post",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(data),
                    headers: {
                        Authorization: localStorage.getItem("token"),


                    },

                    success: function (res) {
                        console.log(res);
                        //  localStorage.setItem("token",res.data.token)
                        if (res.imgData) {
                            $(".target-image").attr("src", "data:image/png;base64," + res.imgData)
                            $("h1").html(res.textVerify)
                        }
                        arry = []

                    },
                    error: function () {

                    }
                })

            })
        })
    </script>
</body>

</html>